<template>
  <Modal :mask-closable="false" width="665" class="modal-content-layout" v-model="show" :title="`${$t('签名')}`">
    <canvas class="wrap" id="canvas">

    </canvas>
    <div slot="footer">
      <Button type="default" @click="show=false">{{ $t('common.Cancle') }}</Button>
      <Button type="primary" @click="clear">{{ $t('清除') }}</Button>
      <Button type="primary" @click="submit">{{$t('提交')}}</Button>
    </div>
  </Modal>
</template>

<script>
import initCanvasSignature from './signatureMethod'

export default {
  name: "signature",
  data() {
    return {
      show: false,
      canvasSignature: null,
      option: {
        writeWidth: 6,
        borderColor: '#ff6666',
        isWriteName: true,
        canvasWidth: 600,
        canvasHeight: 300
      },
      fileUploadUrl: "",
      spinShow:false
    }
  },
  mounted() {
    this.fileUploadUrl = `/fileServer/upload`

  },
  methods: {
    showModal(row){
      // const {signPath} = row;

      this.getSignature()

    },
    hideModal(){
      this.clear()
      this.show = false
    },
    getSignature(){
      this.axios({
        method: 'get',
        url: '/basic/user/getSign',
      }).then(res => {
        if (res.code == 200) {
          const signPath = res.data;
          this.show = true
          this.option.defaultImage = signPath ? this.util.filePathToUrl(signPath):""

          this.$nextTick(() => {
            this.canvasSignature = new initCanvasSignature('canvas', this.option)
          })
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      }).catch(() => {
      });
    },
    submitSignature({filepath}){
      this.axios({
        method: 'post',
        url: '/basic/user/updateSign',
        data: {signPath:filepath},
      }).then(res => {
        
        if (res.code == 200) {
          this.show = false
          this.$Message.success(({content: res.msg, duration: 6, closable: true}))
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      }).catch(() => {
      });
    },
    submit() {
      const {file} = this.canvasSignature.saveAsImg()
      let formData = new FormData();
      formData.append("file", file);
      formData.append("dir", 'signature')
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: this.fileUploadUrl,
        data: formData,
        config,
      }).then(res => {
        if (res.code == 200) {
          this.submitSignature(res.data)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      }).catch(() => {
      });
    },
    clear() {
      this.canvasSignature.option.control.clearCanvas();
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  //width: 500px;
  //height: 500px;
}
</style>
